<script setup lang="ts">
const now = ref(Date.now())
let nowTimer: number | null = null

onMounted(() => {
  nowTimer = window.setInterval(() => {
    now.value = Date.now()
  }, 1000)
})

onBeforeUnmount(() => {
  if (nowTimer) clearInterval(nowTimer)
})


// 引入Vue的ref和生命周期钩子
import { ref, onMounted, watch, onBeforeUnmount } from 'vue'
// 引入路由相关方法
import { useRoute, useRouter } from 'vue-router'
// 引入获取当前用户头像的方法
import { getUserAvatar } from '../../utils/userStore'
// 获取当前路由对象
const route = useRoute()
// 获取路由跳转方法
const router = useRouter()
// 默认头像
const defaultAvatar = 'https://randomuser.me/api/portraits/men/1.jpg'
// 聊天对象用户名，健壮性校验
const userName = typeof route.query.name === 'string' && route.query.name.trim()
  ? route.query.name
  : '未知用户'
// 聊天对象头像，健壮性校验
const bloggerAvatar = typeof route.query.avatar === 'string' && route.query.avatar.trim()
  ? route.query.avatar
  : defaultAvatar

// 消息类型定义
interface Message {
  sender: 'self' | 'other'; // 发送者
  content: string;         // 消息内容或图片/视频URL
  avatar: string;          // 头像
  timestamp?: number;      // 消息时间戳
  type?: 'text' | 'image' | 'video'; // 新增：消息类型
  recalled?: boolean; // 新增：撤回标记
}
// 消息列表，包含内容、发送者、头像
const messages = ref<Message[]>([])

// 消息输入框内容，使用ref实现双向绑定
const inputMsg = ref('')

// 新增：输入框ref，用于重置高度
const chatInput = ref<HTMLTextAreaElement | null>(null)

// 获取当前用户头像（调用userStore工具方法）
const selfAvatar = getUserAvatar() || defaultAvatar

// 自动回复内容池
const autoReplies = [
  '很棒，继续加油！',
  '我也觉得锻炼很重要！',
  '今天你运动了吗？',
  '坚持就是胜利！',
  '有任何健身问题都可以问我哦~'
]

// 发送中状态，防止重复点击
const sending = ref(false)
// 自动回复定时器，防止并发
let autoReplyTimer: number | null = null

// 新增：定义localStorage的key，使用用户名区分不同聊天对象
const storageKey = `chat-messages-${userName}`

// 新增：保存消息到localStorage的方法
function saveMessagesToStorage() {
  // 将消息数组序列化为JSON字符串并存储
  localStorage.setItem(storageKey, JSON.stringify(messages.value))
}

// 新增：从localStorage恢复消息的方法
function loadMessagesFromStorage() {
  // 读取本地存储的消息字符串
  const data = localStorage.getItem(storageKey)
  // 如果有数据则解析为对象，否则返回空数组
  return data ? JSON.parse(data) : []
}

// 清空聊天记录方法
function clearChat() {
  // 弹出确认对话框，只有用户点击“确定”才继续
  if (!window.confirm('确定要清空当前聊天记录吗？此操作不可恢复。')) {
    // 用户点击“取消”，直接返回
    return
  }
  // 清空消息数组
  messages.value = []
  // 移除本地存储的聊天记录
  localStorage.removeItem(storageKey)
}

// 删除/撤回消息方法
function deleteMsg(index: number) {
  const msg = messages.value[index]
  if (msg?.sender === 'self') {
    // 新增：时间校验，超时不可撤回
    if (!msg.timestamp || Date.now() - msg.timestamp >= 60000) {
      alert('超过1分钟，无法撤回该消息！')
      return
    }
    // 可选：弹窗确认
    if (!window.confirm('确定要撤回/删除这条消息吗？')) return
    // 撤回：替换为提示内容并标记
    msg.content = '你撤回了一条消息'
    msg.type = 'text'
    msg.recalled = true
    saveMessagesToStorage()
  }
}

// 页面加载时，博主自动发送一条欢迎消息
onMounted(() => {
  // 新增：尝试从localStorage恢复历史消息
  const history = loadMessagesFromStorage()
  if (history.length > 0) {
    // 如果有历史消息，直接恢复
    messages.value = history
  } else {
    // 否则发送欢迎消息
    messages.value.push({
      sender: 'other',
      content: `你好，我是${userName}，很高兴和你交流！`,
      avatar: bloggerAvatar
    })
  }
  // 滚动到底部
  scrollToBottom()
})

// 自动调整 textarea 高度
function autoResize(e: Event) {
  const textarea = e.target as HTMLTextAreaElement
  textarea.style.height = 'auto'
  textarea.style.height = textarea.scrollHeight + 'px'
}

// 发送消息方法，带防抖和禁用
function sendMsg() {
  if (sending.value) return // 防止重复点击
  const msg = inputMsg.value.trim()
  if (!msg) return // 空消息不发送
  if (msg.length > 200) { // 长度限制
    alert('消息内容不能超过200个字符！')
    return
  }
  sending.value = true
  // 将新消息加入消息列表，sender为self，头像为当前用户头像，新增timestamp和type
  messages.value.push({
    sender: 'self',
    content: msg,
    avatar: selfAvatar,
    timestamp: Date.now(),
    type: 'text'
  })
  // 新增：每次发送消息后保存到localStorage
  saveMessagesToStorage()
  inputMsg.value = ''
  // 新增：重置输入框高度为单行
  if (chatInput.value) {
    chatInput.value.style.height = '40px'
  }
  scrollToBottom()
  autoReply()
  setTimeout(() => { sending.value = false }, 500) // 0.5秒后允许再次发送
}

// 自动回复方法，防止并发
function autoReply() {
  if (autoReplyTimer) clearTimeout(autoReplyTimer)
  const reply = autoReplies[Math.floor(Math.random() * autoReplies.length)]
  autoReplyTimer = window.setTimeout(() => {
    messages.value.push({
      sender: 'other',
      content: reply,
      avatar: bloggerAvatar
    })
    // 新增：自动回复后也保存到localStorage
    saveMessagesToStorage()
    scrollToBottom()
    autoReplyTimer = null
  }, 1000)
}

// 聊天内容区滚动到底部，延迟确保DOM渲染
function scrollToBottom() {
  setTimeout(() => {
    const content = document.querySelector('.chat-content')
    if (content) {
      content.scrollTop = content.scrollHeight
    }
  }, 50)
}

// 头像兜底处理（img标签更优，div背景图可用动态修正）
function handleAvatarError(e: Event) {
  const target = e.target as HTMLElement
  if (target && target.style) {
    target.style.backgroundImage = `url('${defaultAvatar}')`
  }
}

// 跳转到博主详情页（使用name方式，确保路由切换正常）
function goToBloggerDetail() {
  router.push({
    name: 'Detail',
    query: { name: userName, avatar: bloggerAvatar }
  })
}

// 新增：监听messages变化，自动保存（防止遗漏）
watch(messages, () => {
  saveMessagesToStorage()
}, { deep: true })

// 新增：表情面板显示状态
const showEmojiPanel = ref(false)
// 新增：常用emoji表情数组
const emojiList = [
  '😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊',
  '😍', '😘', '😗', '😙', '😚', '🙂', '🤗', '🤩', '🤔', '😐',
  '😑', '😶', '🙄', '😏', '😣', '😥', '😮', '🤐', '😯', '😪',
  '😫', '😴', '😌', '😛', '😜', '😝', '🤤', '😒', '😓', '😔',
  '😕', '🙃', '🤑', '😲', '☹️', '🙁', '😖', '😞', '😟', '😤',
  '😢', '😭', '😦', '😧', '😨', '😩', '🤯', '😬', '😰', '😱',
  '😳', '🤪', '😵', '😡', '😠', '🤬', '😷', '🤒', '🤕', '🤢',
  '🤮', '🤧', '😇', '🥳', '🥺', '🤠', '🥰', '🤡', '🤥', '🤫',
  '🤭', '🧐', '🤓', '😈', '👿', '👹', '👺', '💀', '👻', '👽',
  '🤖', '💩', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '😿'
]
// 新增：点击表情插入到输入框
function addEmoji(emoji: string) {
  // 在当前光标处插入表情（简单实现为追加到末尾）
  inputMsg.value += emoji
  // 选完表情后可自动关闭面板（可选）
  showEmojiPanel.value = false
}

// 新增：图片和视频上传input的ref
const imgInput = ref<HTMLInputElement | null>(null)
const videoInput = ref<HTMLInputElement | null>(null)
// 触发图片上传input
function triggerImgInput() {
  imgInput.value?.click()
}
// 触发视频上传input
function triggerVideoInput() {
  videoInput.value?.click()
}
// 发送图片
function sendImage(e: Event) {
  const file = (e.target as HTMLInputElement).files?.[0]
  if (!file) return
  const reader = new FileReader()
  reader.onload = () => {
    messages.value.push({
      sender: 'self',
      content: reader.result as string, // base64
      avatar: selfAvatar,
      timestamp: Date.now(),
      type: 'image'
    })
    saveMessagesToStorage()
    scrollToBottom()
  }
// 使用try-catch包裹文件读取操作,避免可能的错误
try {
  reader.readAsDataURL(file)
} catch (err) {
  console.error('文件读取失败:', err)
}
  // 清空input值，防止同一文件无法重复上传
  (e.target as HTMLInputElement).value = ''
}
// 发送视频
function sendVideo(e: Event) {
  const file = (e.target as HTMLInputElement).files?.[0]
  if (!file) return
  const url = URL.createObjectURL(file)
  messages.value.push({
    sender: 'self',
    content: url, // blob url
    avatar: selfAvatar,
    timestamp: Date.now(),
    type: 'video'
  })
  saveMessagesToStorage()
  scrollToBottom();
  // 清空input值
  (e.target as HTMLInputElement).value = ''
}

// 新增：表情面板和按钮的ref
const emojiPanel = ref<HTMLElement | null>(null)
const emojiBtn = ref<HTMLElement | null>(null)

// 监听全局点击，点击面板外自动关闭
function handleClickOutside(e: MouseEvent) {
  const panel = emojiPanel.value
  const btn = emojiBtn.value
  if (!panel || !btn) return
  // 如果点击目标不是面板或按钮本身，也不是它们的子元素，则关闭
  if (
    !panel.contains(e.target as Node) &&
    !btn.contains(e.target as Node)
  ) {
    showEmojiPanel.value = false
  }
}
// 监听表情面板显示状态，动态添加/移除事件监听
watch(showEmojiPanel, (val) => {
  if (val) {
    document.addEventListener('click', handleClickOutside)
  } else {
    document.removeEventListener('click', handleClickOutside)
  }
})
// 组件卸载时移除监听，防止内存泄漏
onBeforeUnmount(() => {
  document.removeEventListener('click', handleClickOutside)
})




</script>

<template>
  <div class="chat-page">
    <!-- 顶部栏 -->
    <div class="chat-header">
      <!-- 返回按钮，点击返回上一页 -->
      <span class="back" @click="router.back()">← 返回</span>
      <!-- 聊天标题，显示对方用户名 -->
      <span class="chat-title">与 {{ userName }} 聊天</span>
      <!-- 新增：清空聊天按钮，点击调用clearChat方法 -->
      <button class="clear-btn" @click="clearChat">清空聊天</button>
    </div>
    <!-- 聊天内容区 -->
    <div class="chat-content">
      <!-- 消息列表渲染 -->
      <div class="msg-list">
        <!-- 遍历消息列表 -->
        <div v-for="(msg, idx) in messages" :key="idx" class="msg-row"
          :class="msg.sender === 'self' ? 'right' : 'left'">
          <!-- 对方消息显示在左侧，自己消息显示在右侧 -->
          <template v-if="msg.sender === 'other'">
            <!-- 对方头像，点击跳转到详情页 -->
            <div class="avatar" :style="{ backgroundImage: `url('${msg.avatar}')` }" @click="goToBloggerDetail"
              @error="handleAvatarError" style="cursor:pointer;"></div>
            <!-- 消息气泡，支持图片/视频/文本/撤回 -->
            <div class="msg-bubble" :class="{ recalled: msg.recalled }">
              <template v-if="msg.recalled">
                {{ msg.content }}
              </template>
              <template v-else-if="msg.type === 'image'">
                <img :src="msg.content" class="msg-img" alt="图片消息" />
              </template>
              <template v-else-if="msg.type === 'video'">
                <video :src="msg.content" class="msg-video" controls />
              </template>
              <template v-else>
                {{ msg.content }}
              </template>
            </div>
          </template>
          <template v-else>
            <!-- 消息气泡，支持图片/视频/文本/撤回 -->
            <div class="msg-bubble" :class="{ recalled: msg.recalled }">
              <template v-if="msg.recalled">
                {{ msg.content }}
              </template>
              <template v-else-if="msg.type === 'image'">
                <img :src="msg.content" class="msg-img" alt="图片消息" />
              </template>
              <template v-else-if="msg.type === 'video'">
                <video :src="msg.content" class="msg-video" controls />
              </template>
              <template v-else>
                {{ msg.content }}
              </template>
            </div>
            <!-- 仅在1分钟内显示撤回按钮，且未撤回 -->
            <button v-if="msg.sender === 'self' && msg.timestamp && now - msg.timestamp < 60000 && !msg.recalled"
              class="delete-btn" @click="deleteMsg(idx)" title="撤回/删除">🗑</button>
            <!-- 自己头像（当前用户头像），兜底处理 -->
            <div class="avatar self" :style="{ backgroundImage: `url('${msg.avatar}')` }" @error="handleAvatarError">
            </div>
          </template>
        </div>
      </div>
    </div>
    <!-- 输入区 -->
    <div class="chat-input-bar">
      <!-- 新增：图片上传input和按钮 -->
      <input ref="imgInput" type="file" accept="image/*" style="display:none" @change="sendImage" />
      <button class="media-btn" @click="triggerImgInput" title="发送图片">🖼</button>
      <!-- 新增：视频上传input和按钮 -->
      <input ref="videoInput" type="file" accept="video/*" style="display:none" @change="sendVideo" />
      <button class="media-btn" @click="triggerVideoInput" title="发送视频">🎬</button>
      <!-- 新增：表情按钮加ref -->
      <button ref="emojiBtn" class="emoji-btn" @click="showEmojiPanel = !showEmojiPanel" type="button">😊</button>
      <!-- 新增：表情面板加ref -->
      <div v-if="showEmojiPanel" ref="emojiPanel" class="emoji-panel">
        <span v-for="(emoji, idx) in emojiList" :key="idx" class="emoji-item" @click="addEmoji(emoji)">{{ emoji
        }}</span>
      </div>
      <!-- 输入框，改为textarea，支持自动换行和最大长度 -->
      <textarea ref="chatInput" class="chat-input" placeholder="请输入消息..." v-model="inputMsg"
        @keyup.enter.exact.prevent="sendMsg" :disabled="sending" maxlength="200" rows="1"
        @input="autoResize"></textarea>
      <!-- 发送按钮，发送中禁用 -->
      <button class="send-btn" @click="sendMsg" :disabled="sending">
        {{ sending ? '发送中...' : '发送' }}
      </button>
    </div>
  </div>
</template>

<style scoped>
/* 聊天页面整体布局 */
.chat-page {
  min-height: 100vh;
  background: #f7f7f7;
  display: flex;
  flex-direction: column;
}

/* 顶部栏样式 */
.chat-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: #1abc9c;
  color: #fff;
  font-size: 18px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* 返回按钮样式 */
.back {
  cursor: pointer;
  margin-right: 18px;
  font-size: 20px;
}

/* 聊天标题样式 */
.chat-title {
  font-weight: bold;
}

/* 聊天内容区样式 */
.chat-content {
  flex: 1;
  padding: 16px 0 0 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* 消息列表样式 */
.msg-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px 16px 16px;
}

/* 单条消息行样式 */
.msg-row {
  display: flex;
  align-items: flex-end;
}

/* 左侧消息（对方） */
.msg-row.left {
  justify-content: flex-start;
}

/* 右侧消息（自己） */
.msg-row.right {
  justify-content: flex-end;
}

/* 头像样式 */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eee url('https://randomuser.me/api/portraits/men/1.jpg') center/cover;
  margin: 0 8px;
}

/* 自己头像样式（可自定义） */
.avatar.self {
  /* 头像图片由内联style动态设置 */
}

/* 消息气泡样式 */
.msg-bubble {
  max-width: 70vw;
  padding: 10px 16px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.6;
  background: #fff;
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  word-break: break-all;
}

/* 右侧消息气泡样式 */
.msg-row.right .msg-bubble {
  background: #1abc9c;
  color: #fff;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 18px;
}

/* 左侧消息气泡样式 */
.msg-row.left .msg-bubble {
  background: #fff;
  color: #333;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 18px;
}

/* 撤回消息气泡样式 */
.msg-bubble.recalled {
  color: #aaa;
  font-style: italic;
  background: #f2f2f2;
  text-align: center;
}

/* 输入区样式 */
.chat-input-bar {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid #eee;
  position: sticky;
  bottom: 0;
  z-index: 10;
  /* 新增：为表情面板定位做准备 */
  position: relative;
}

/* 输入框样式，适配textarea */
.chat-input {
  flex: 1;
  border: none;
  border-radius: 20px;
  background: #f5f5f5;
  padding: 10px 16px;
  font-size: 15px;
  outline: none;
  margin-right: 10px;
  resize: none;
  /* 禁止手动拖拽 */
  overflow-y: hidden;
  /* 隐藏垂直滚动条 */
  min-height: 40px;
  max-height: 120px;
  /* 最多显示3-4行 */
  line-height: 1.6;
  box-sizing: border-box;
}

/* 发送按钮样式 */
.send-btn {
  background: #1abc9c;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
}

/* 发送按钮悬停效果 */
.send-btn:hover {
  background: #16a085;
}

/* 新增：清空聊天按钮样式 */
.clear-btn {
  margin-left: auto;
  /* 靠右显示 */
  background: #fff;
  color: #1abc9c;
  border: 1px solid #fff;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.clear-btn:hover {
  background: #e8f8f5;
  color: #16a085;
}

/* 新增：表情按钮样式 */
.emoji-btn {
  background: #fff;
  border: none;
  font-size: 22px;
  margin-right: 6px;
  cursor: pointer;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  transition: background 0.2s;
}

.emoji-btn:hover {
  background: #e8f8f5;
}

/* 恢复：表情面板向上打开 */
.emoji-panel {
  position: absolute;
  bottom: 56px;
  /* 紧贴输入栏上方 */
  left: 12px;
  /* 可根据需要微调 */
  width: 320px;
  /* 固定宽度 */
  background: #fff;
  border: 1px solid #eee;
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  padding: 12px 10px 8px 10px;
  display: flex;
  flex-wrap: wrap;
  z-index: 20;
  gap: 2px 6px;
  box-sizing: border-box;
}

.emoji-item {
  font-size: 22px;
  margin: 2px 4px;
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 4px;
  transition: background 0.15s;
}

.emoji-item:hover {
  background: #e8f8f5;
}

/* 撤回/删除按钮样式 */
.delete-btn {
  background: transparent;
  border: none;
  color: #bbb;
  font-size: 16px;
  margin: 0 4px;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0 2px;
  align-self: flex-end;
}

.delete-btn:hover {
  color: #e74c3c;
}

/* 图片/视频按钮样式 */
.media-btn {
  background: #fff;
  border: none;
  font-size: 20px;
  margin-right: 6px;
  cursor: pointer;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  transition: background 0.2s;
}

.media-btn:hover {
  background: #e8f8f5;
}

/* 聊天图片样式 */
.msg-img {
  max-width: 180px;
  max-height: 120px;
  border-radius: 8px;
  display: block;
}

/* 聊天视频样式 */
.msg-video {
  max-width: 180px;
  max-height: 120px;
  border-radius: 8px;
  display: block;
}
</style>